<template>
  <el-card class="card1">
    <div class="box">
      <div class="select">
        <div class="title">一级科室:</div>
        <el-select
          placeholder="请选择一级科室"
          v-model="departId"
          style="width: 240px"
          @change="changeDepart"
          :disabled="isShow == 2"
        >
          <el-option
            v-for="item in departList"
            :key="item._id"
            :label="item.DepartName"
            :value="item._id"
          />
        </el-select>
      </div>
      <div class="select">
        <div class="title">二级科室:</div>
        <el-select
          placeholder="请选择二级科室"
          v-model="tweDepart"
          style="width: 240px"
          :disabled="isShow == 2"
        >
          <el-option
            v-for="item in TweDepartList"
            :key="item"
            :label="item"
            :value="item"
          />
        </el-select>
      </div>
      <div class="select">
        <div class="title">医生职位:</div>
        <el-select
          placeholder="请选择医生职位"
          v-model="jobId"
          style="width: 240px"
          :disabled="isShow == 2"
        >
          <el-option
            v-for="item in jobList"
            :key="item._id"
            :label="item.jName"
            :value="item._id"
          />
        </el-select>
      </div>
    </div>
  </el-card>
  <el-card v-if="isShow == 1">
    <el-table :data="doctorList" border max-height="650">
      <el-table-column
        label="编号"
        type="index"
        align="center"
        width="80"
      ></el-table-column>
      <el-table-column
        label="医生姓名"
        prop="name"
        align="center"
      ></el-table-column>
      <el-table-column
        label="医生性别"
        prop="sex"
        align="center"
      ></el-table-column>
      <el-table-column
        label="医生年龄"
        prop="age"
        align="center"
      ></el-table-column>
      <el-table-column label="科室描述" align="center">
        <template #default="{ row }">
          <span>{{ row.depart?.DepartContent }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="联系方式"
        prop="phone"
        align="center"
      ></el-table-column>
      <el-table-column label="操作" align="center">
        <template #default="{ row }">
          <el-button
            type="primary"
            size="small"
            icon="View"
            @click="ShowScheduling(row._id)"
            >查看排班</el-button
          >
        </template>
      </el-table-column>
    </el-table>
  </el-card>
  <el-card v-else>
    <div class="tops">
      <el-button @click="isShow = 1">返回</el-button>

      <el-button type="primary" icon="Plus" @click="addSchedu"
        >添加排班</el-button
      >
      <el-select v-model="SchStatus" @change="changeSchStatus">
        <el-option :value="3" label="全部"></el-option>
        <el-option :value="0" label="排班中"></el-option>
        <el-option :value="1" label="已停诊"></el-option>
        <el-option :value="2" label="已满"></el-option>
      </el-select>
    </div>
    <el-table border :data="schedulingList" class="table" max-height="550px" >
      <el-table-column
        label="序号"
        type="index"
        align="center"
        width="80"
      ></el-table-column>
      <el-table-column label="科室名称" align="center">
        <template #default="{ row }">
          <span>{{ row.doctorId?.TweDepart }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="排班日期"
        prop="date"
        align="center"
      ></el-table-column>
      <el-table-column
        label="起始时间"
        prop="startTime"
        align="center"
      ></el-table-column>
      <el-table-column
        label="结束时间"
        prop="endTime"
        align="center"
      ></el-table-column>
      <el-table-column
        label="挂号最大人数次数"
        prop="maxNumber"
        align="center"
      ></el-table-column>
      <el-table-column
        label="当前剩余挂号次数"
        prop="currentNumber"
        align="center"
      ></el-table-column>
      <el-table-column label="挂号价格" align="center">
        <template #default="{ row }">
          <span>{{ row.price }}元</span>
        </template>
      </el-table-column>
      <el-table-column label="排班状态" align="center">
        <template #default="{ row }">
          <el-tag type="success" v-if="row.status == 0">预约挂号中</el-tag>
          <el-tag type="danger" v-else-if="row.status == 1">已停诊</el-tag>
          <el-tag type="warning" v-else>预约人数已满</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="200">
        <template #default="{ row }">
          <el-button
          v-if="row.status !== 1"
            type="info"
            size="small"
            icon="Edit"
            title="修改排班"
            @click="editSchedu(row._id)"
          ></el-button>
          <el-tag v-else type="info"  >
            <el-icon><WarnTriangleFilled /></el-icon>
            订单已结束
          </el-tag>
        </template>
      </el-table-column>
    </el-table>
  </el-card>
  <AddScheduling
    ref="addorup"
    v-model="isShowAddScheduling"
    :doctorId="doctorId"
    :id="schedulingId"
    :ShowScheduling="ShowScheduling"
  ></AddScheduling>
</template>

<script setup>
defineOptions({
  name: "Scheduling",
});
import { ref, onMounted, computed, watch, reactive } from "vue";
import { getDepartMentListAPI } from "@/api/departMent";
import { getJobListAPI } from "@/api/job";
import {
  getDoctorInfoAPI,
  getDoctorSchListAPI,
  getDoctorSchDetailAPI,
} from "@/api/doctorSching.js";
import AddScheduling from "./AddScheduling/index.vue";
let SchStatus = ref(3);
let departList = ref([]);
let departId = ref("");
let tweDepart = ref();
let jobList = ref([]);
let jobId = ref("");
let doctorList = ref([]);
let addorup = ref(null);
//排班列表
let schedulingList = ref([]);
//医生id
let doctorId = ref("");
//排班id
let schedulingId = ref("");
//用于控制医生列表和排班列表切换
let isShow = ref(1); // 1显示医生列表 2显示医生排班情况
//控制添加排班对话框的显示与隐藏
let isShowAddScheduling = ref(false);
onMounted(() => {
  getDepartMentList();
  getJobList();
});
watch(departId, (newValue) => {
  if (newValue) {
    getDoctorSching();
  }
});
watch(tweDepart, (newValue) => {
  if (newValue) {
    getDoctorSching();
  }
});
watch(jobId, (newValue) => {
  if (newValue) {
    getDoctorSching();
  }
});
let TweDepartList = computed(() => {
  let arr = departList.value.filter((item) => item._id == departId.value);
  return arr[0]?.TwoDepart;
});
let arr = ''
const changeSchStatus = (val) => {
  
  if(val==3) {
    ShowScheduling(doctorId.value);
  }else {
    schedulingList.value = arr.filter(item=>item.status==val);
  }
  // }else if (val==1) {
  //   schedulingList.value = arr.filter(item=>item.status==1);
  // }else if (val==2) {
  //   schedulingList.value = arr.filter(item=>item.status==2);
  // }else if (val==0) {
  //   schedulingList.value = arr.filter(item=>item.status==0);
  // }
};
//添加排班按钮的回调
const addSchedu = () => {
  isShowAddScheduling.value = true;
};

const editSchedu = async (id) => {
  schedulingId.value = id;
  isShowAddScheduling.value = true;
  addorup.value.getDoctorSching(id);
};
const changeDepart = () => {
  tweDepart.value = "";
  jobId.value = "";
};
//查看排班
const ShowScheduling = async (id) => {
  let result = await getDoctorSchListAPI(id);
  doctorId.value = id;
  schedulingList.value = result.data;
  isShow.value = 2;
 arr = JSON.parse(JSON.stringify(schedulingList.value))
};
const getDoctorSching = async () => {
  if (!departId.value || !tweDepart.value || !jobId.value) {
    return;
  }
  let result = await getDoctorInfoAPI({
    depart: departId.value,
    TweDepart: tweDepart.value,
    job: jobId.value,
  });
  doctorList.value = result.data;
};
const getDepartMentList = async () => {
  let result = await getDepartMentListAPI(1, 99);

  departList.value = result.data;
};
const getJobList = async () => {
  let result = await getJobListAPI(1, 99);
  jobList.value = result.data;
};
</script>

<style lang="scss" scoped>
.card1 {
  margin-bottom: 20px;

  .box {
    display: flex;

    .select {
      display: flex;
      align-items: center;
      margin-right: 20px;
      .title {
        margin-right: 20px;
        //文字颜色
        color: #606266;

        //文字大小
        font-size: 14px;
      }
    }

  }
 
}
.tops {
    width: 100%;
    display: flex;
    :deep(.el-select) {
      margin-left: 20px;
      width: 190px;
    }
  }
.table {
  margin: 10px 0px;
}
</style>
